<template>
  <view>
    <view class="product-item">
      <!--左側图片-->
      <view class="product-item-left">
        <radio :checked = "product.product_state" color="#FF5A5F" v-if ="showRadio" @click="radioClickedSolve"></radio>
        <image :src="(resourseUrl + product.img_url )|| defaultPic" class="product-img"></image>
      </view>
      <!--右側信息-->
      <view class="product-item-right">
        <view class="product-name">{{product.productName}}</view>
        <view class="product-information">
          <view class="product-price">{{product.price}}元/{{product.unit}}</view>
          <uni-number-box :min = "1" :value="product.product_count" v-if ="showNumBox" @change="numBoxChangeSolve"></uni-number-box>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name:"product-item",
    
    props: {
      //外界傳來的產品信息对象
      product:{
        type: Object,
        default:{}
      },
      //決定是否顯示radio組件
      showRadio:{
        type:Boolean,
        default:false
      },
      //決定是否顯示numBox組件
      showNumBox:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        //默認图片
        defaultPic: "https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png",
        wholeUrl:""
        
      };
    },
    //如果要保持小數點后兩位可用这個过濾器
    filters:{
      tofixed(num){
        return Number(num).toFixed(2)
      }
    },
    methods:{
      //radio點击事件,綁定外界的事件
      radioClickedSolve(){
        this.$emit('radio-change',{
          product_id:this.product.product_id,
          product_state:!this.product.product_state
        })
      },
      numBoxChangeSolve(value){
        this.$emit('numBox-change',{
          product_id:this.product.product_id,
          //确保它是個數字类型
          product_count:+value
        })
      }
    },
    computed:{
      ...mapState('user',['resourseUrl']),
    }
    
  }
</script>

<style lang="scss">
  .product-item{
    width: 750rpx;
    box-sizing: border-box;
    display: flex;
    padding: 10px 5px;
    border-bottom: 1px solid #F0F0F0;
    .product-item-left{
      margin-right: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .product-img{
        width: 130px;
        height: 90px;
        display:block;
      }
    }
    .product-item-right{
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      .product-name{
        font-size: 14px;
      }
      .product-information{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .product-price{
          color: #C00000;
          font-size: 14px;
        }
      }
    }
  }

</style>
